import React, { useEffect, useState } from "react";
import Router, { withRouter } from '@/router/renderRouter';
import './index.scss';
import { 
  homeMemberData,
} from '@/api/api'
// Component
import {
  G2,
  Chart,
  Tooltip,
  Interval,
} from "bizcharts";

const TransDataCharts = (props) => {
  const [loading, setLoading] = useState(false)
  const [dataSource, setDataSource] = useState([]);
  
  const getKey = (key) =>{
    if(key === "buyAmount"){
      return '买入金额'
    }else if(key === "sellAmount"){
      return '卖出金额'
    }else if(key === "buyPens"){
      return '买入订单'
    }else if(key === "sellPens"){
      return '卖出订单'
    }
  }
  
  const getHomeMemberData = async () => {
    try {
      setLoading(true)
      let res = await homeMemberData()
      if(res.code === 0) {
        let newSource = []
        res.data.forEach(item=>{
          for (let key in item) {
            let obj = {}
            if(key !== 'countMonth'){
              obj ={
              	month: item.countMonth,
              	type: getKey(key),
              	value: item[key]
              }
              newSource.push(obj)
            }
          }
        })
        setDataSource(newSource)
      }
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  }
  
  // 首次更新
  useEffect(() => {
    getHomeMemberData()
    return () => { 
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  } , [])
  
  
  return (
    <>
      <Chart height={400} padding={[30, 20, 60, 60]} data={dataSource} autoFit>
        <Interval
          adjust={[
           {
              type: 'dodge',
              marginRatio: 0,
            },
          ]}
          color="type"
          position="month*value"
        />
        <Tooltip shared />
      </Chart>
    </>
  )
}
export default withRouter(TransDataCharts)